<template>
  <div class="bg-gray-100 p-4 rounded-lg mb-4">
    <h3 class="text-lg font-semibold mb-2">用户调试信息</h3>
    <div v-if="authStore.isAuthenticated">
      <p><strong>用户名:</strong> {{ authStore.user?.username }}</p>
      <p><strong>邮箱:</strong> {{ authStore.user?.email }}</p>
      <p><strong>管理员权限:</strong> {{ authStore.user?.is_staff ? '是' : '否' }}</p>
      <p><strong>Token:</strong> {{ authStore.token?.substring(0, 20) }}...</p>
      <div class="mt-2">
        <button 
          @click="refreshUserInfo" 
          class="bg-blue-500 text-white px-4 py-2 rounded mr-2"
        >
          刷新用户信息
        </button>
        <button 
          @click="logout" 
          class="bg-red-500 text-white px-4 py-2 rounded"
        >
          重新登录
        </button>
      </div>
    </div>
    <div v-else>
      <p>用户未登录</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { authAPI } from '@/services/api'

const authStore = useAuthStore()
const router = useRouter()

const refreshUserInfo = async () => {
  try {
    const response = await authAPI.getCurrentUser()
    authStore.user = response.data
    localStorage.setItem('user', JSON.stringify(response.data))
    alert('用户信息已刷新')
  } catch (error) {
    // console.error('刷新用户信息失败:', error)
    alert('刷新失败，请重新登录')
  }
}

const logout = async () => {
  await authStore.logout()
  router.push('/login')
}
</script>